<!--

    MuleSoft Examples
    Copyright 2014 MuleSoft, Inc.

    This product includes software developed at
    MuleSoft, Inc. (http://www.mulesoft.com/).

-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>jQuery.beautyOfCode 0.2 Demo</title>
	
	<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="jquery.beautyOfCode.js"></script>

	<script type="text/javascript">
		$.beautyOfCode.init({
			brushes: ['Xml', 'JScript', 'CSharp', 'Plain', 'Php'],
			ready: function() {
				$.beautyOfCode.beautifyAll();
				$("#someCode").beautifyCode('javascript', {gutter:false});
			}
		});
	</script>
</head>
<body>
	<h1>Just a simple demo page</h1>
	<h2>Script references and initialization</h2>
	<pre class="code">
	  <code class="html boc-collapse">
		&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js">&lt;/script>
		&lt;script type="text/javascript" src="Scripts/jquery.beautyOfCode.js">&lt;/script>

		&lt;script type="text/javascript">
			$.beautyOfCode.init({
					theme: 'Django',
				brushes: ['Xml', 'JScript', 'CSharp', 'Plain', 'Php'],
				ready: function() {
					$.beautyOfCode.beautifyAll();
					$("#someCode").beautifyCode('javascript', {gutter:false});
				}
			});
		&lt;/script>
      </code>
	</pre>
	<h2>Javascript, explicit, no gutter, highlight</h2>
	<pre id="someCode">
		<code class="boc-highlight[2,4]">
			// my code
			var x = "Hello, world!";
			function juppi() {
				juppi(); // kill
			}
		</code>
	</pre>
	<pre class="code">
		<code class="html boc-collapse">
			&lt;pre id="someCode">
				&lt;code class="boc-highlight[2,4]">
					// my code
					var x = "Hello, world!";
					function juppi() {
						juppi(); // kill
					}
				&lt;/code>
			&lt;/pre>
		</code>
	</pre>
	
	<h2>Html, autofind, start with second line, ruler</h2>
	<pre class="code">
		<code class="html boc-first-line[2] boc-ruler">
			This is normal text
			&lt;a>This is bold&lt;/a>
		</code>
	</pre>
	<pre class="code">
		<code class="html boc-collapse">
			&lt;pre class="code">
				&lt;code class="html boc-first-line[2] boc-ruler">
					This is normal text
					&amp;lt;a>This is bold&amp;lt;/a>
				&lt;/code>
			&lt;/pre>
		</code>
	</pre>
	
	<h2>Plain, autofind, smart-tab</h2>
	<pre class="code">
		<code class="plain boc-smart-tab">
			This is	tabbed
			This	too
		</code>
	</pre>
	<pre class="code">
		<code class="html boc-collapse">
			&lt;pre class="code">
				&lt;code class="plain boc-smart-tab">
					This is	tabbed
					This	too
				&lt;/code>
			&lt;/pre>
	  </code>
	</pre>
	
	<h2>Php, html-script</h2>
	<pre class="code">
		<code class="php boc-html-script">
			&lt;strong style="font-weight: normal">&lt;?= str_replace("\n", "&lt;br/>", $var) ?>&lt;/strong>
		</code>
	</pre>
	<pre class="code">
		<code class="html boc-collapse">
			&lt;pre class="code">
				&lt;code class="php boc-html-script">
					&amp;lt;strong style="font-weight: normal">&amp;lt;?= str_replace("\n", "&amp;lt;br/>", $var) ?>&amp;lt;/strong>
 				&lt;/code>
			&lt;/pre>
		</code>
	</pre>
	
	<h2>Using 'code'-tag only</h2>
	<code class="code language-javascript">
		function(){ alert('hello'); }
	</code>
	<pre class="code">
		<code class="html boc-collapse">
			&lt;code class="code language-javascript">
				function(){ alert('hello'); }
			&lt;/code>
		</code>
	</pre>
</body>
</html>
